<template>
  <van-list>
    <div v-if="!(reportInfoCount === 0)">
      <van-cell>
        序号:
        <span>{{reportInfo.KKScode}}</span>
      </van-cell>
      <van-cell>
        KKScode:
        <span>{{reportInfo.KKScode}}</span>
      </van-cell>
      <van-cell>
        工作描述:
        <span>{{reportInfo.description}}</span>
      </van-cell>
      <van-cell>
        厂房位置:
        <span>{{reportInfo.location}}</span>
      </van-cell>
      <van-cell>
        完工日期:
        <span>{{reportInfo.finishTime}}</span>
      </van-cell>
      <van-cell>
        故障描述:
        <van-field type="textarea" :placeholder="reportInfo.faultDescription" v-model="faultDescription"/>
      </van-cell>
      <van-cell>
        故障原因分析:
        <van-field type="textarea" :placeholder="reportInfo.faultAnalysis" v-model="faultAnalysis"/>
      </van-cell>
      <van-cell>
        故障措施及结果:
        <van-field type="textarea" :placeholder="reportInfo.faultSolution" v-model="faultSolution" />
      </van-cell>
      <van-cell class="picker-cell">
        <van-field
          readonly
          clickable
          :label="'选择工作包状态:'"
          :value="value"
          placeholder
          @click="showPicker = true"
        />
      </van-cell>
      <van-cell>
         <van-field
          readonly
          clickable
          :label="'选择日期:'"
          :value="selectedDate"
          placeholder
          @click="showDateBox = true"
        />
      </van-cell>
      <van-cell>
        <van-field v-model="QDRid" label="编号:" placeholder="QDR或其他报告编号" />
      </van-cell>
      <van-button type="primary" @click="submit(reportId)">保存</van-button>
    </div>
    <div v-else>
      <loading />
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model="showDateBox" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="selectDate(currentDate)" @cancel="showDateBox = false" :formatter="formatter"/>
    </van-popup>
  </van-list>
</template>
<style lang="less" scoped>
/deep/.van-field__label {
  width:120px;
}
.van-cell.van-cell--clickable.van-field {
  padding: 0;
}
.van-cell.van-field {
  padding: 0;
}
</style>
<script>
import loading from "@/components/loading.vue";
import {getReportInfo,postReportInfo} from "@/api/data"

export default {
  data() {
    return {
      currentDate: new Date(),
      selectedDate:"",
      value:"选择工作包状态",//工作包状态
      reportId:-1,
      reportIndex:-1,
      reportInfo: {},
      faultDescription:"",
      faultAnalysis:"",
      faultSolution:"",
      columns: ["报告编制","完工报告","承审完报","关闭归档"],
      showPicker: false,
      showDateBox: false,
      QDRid:''
    };
  },
  computed:{
   reportInfoCount(){
     return Object.keys(this.reportInfo).length;
   }
  },
  methods: {
    getReportInfo(){
      getReportInfo().then(res=>{
        console.log(res);
        this.reportInfo = res.data;
      });
    },
    changeList(index){
       let reportItem = window.reportList.splice(index,1);
        window.paperReportList.push(reportItem[0]);        
    },
    submit(reportId) {
      let submitData = {
        id:reportId,
        faultDescription:this.faultDescription,
        faultAnalysis:this.faultAnalysis,
        faultSolution:this.faultSolution,
        packageState:this.value,//工作包状态
        date:this.selectedDate,
        QDR:this.QDRid
      };
      console.log(submitData);
      postReportInfo(submitData).then(res=>{
        if(res && res.success){
          this.$toast(res.msg);
          this.changeList(this.reportIndex);
          this.$router.go(-1);
        }else{
          this.toast("保存失败")
        }
      });
      
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    selectDate(selectedDate){
      this.selectedDate = selectedDate.toLocaleDateString();
      this.showDateBox = false;
      
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }  else if (type === 'day') {
        return `${value}日`
      }
      return value;
    }
  },
  activated(){
    this.reportIndex =  this.$route.params.index;
    this.reportId = this.$route.params.id;
    this.getReportInfo(this.reportId);  
  },
  deactivated(){
    this.reportInfo ={};
    this.faultDescription = "";
    this.faultAnalysis = "";
    this.faultSolution = "";
    this.QDRid = "";
    this.value="";
    this.selectedDate = "";
    
  },
  components: {
    loading
  }
};
</script>